<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="780"
    :model-value="modelValue"
    title="添加学生基础信息"
    @update:modelValue="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" style="padding-right: 30px;">

      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input
              clearable
              v-model="form.name"
              placeholder="请输入姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="code">
            <el-input
              clearable
              v-model="form.code"
              placeholder="请输入学号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <dict-data
              code="user_sex"
              v-model="form.sex"
              placeholder="请选择性别"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              value-format="YYYY-MM-DD"
              placeholder="请选择出生日期"
              class="ele-fluid"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入学时间" prop="enterTime">
            <el-date-picker
              v-model="form.enterTime"
              value-format="YYYY-MM-DD"
              placeholder="请选择入学时间"
              class="ele-fluid"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业年份" prop="graduationYear">
            <dict-data
              clearable
              filterable
              code="graduation_year"
              v-model="form.graduationYear"
              placeholder="请选择毕业年份"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校区" prop="campus">
            <dict-data
              code="campus"
              clearable
              filterable
              v-model="form.campus"
              placeholder="请选择校区"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属总支" prop="organization">
            <dict-data
              code="organization"
              clearable
              filterable
              v-model="form.organization"
              placeholder="请选择所属总支"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年级" prop="grade">
            <el-input
              clearable
              v-model="form.grade"
              placeholder="请输入年级，如：2008"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系别" prop="department">
            <el-input
              clearable
              v-model="form.department"
              placeholder="请输入系别"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业" prop="major">
            <el-input
              clearable
              v-model="form.major"
              placeholder="请输入专业"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="专业方向" prop="majorDirection">
            <el-input
              clearable
              v-model="form.majorDirection"
              placeholder="请输入专业方向"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学制" prop="studyTime">
            <dict-data
              code="study_time"
              clearable
              filterable
              v-model="form.studyTime"
              placeholder="请选择学制"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班号" prop="classNum">
            <el-input
              clearable
              v-model.number="form.classNum"
              placeholder="请输入班号，如：1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辅导员" prop="counsellorCode">
            <el-select
              v-model="form.counsellorCode"
              filterable
              remote
              remote-show-suffix
              placeholder="请选择辅导员"
              :remote-method="remoteTeacher"
              :loading="teacherLoading"
              style="width: 100%;"
            >
              <el-option v-for="item in teacherList" :key="item.userName" :label="item.nickName" :value="item.userName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <dict-data
              code="nation"
              clearable
              filterable
              v-model="form.nation"
              placeholder="请选择民族"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生源地" prop="source">
            <el-select
              v-model="form.source"
              filterable
              remote
              remote-show-suffix
              placeholder="请选择生源所在地"
              :remote-method="remoteSource"
              :loading="sourceLoading"
              style="width: 100%;"
            >
              <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="politicalStatus">
            <dict-data
              code="political"
              clearable
              filterable
              v-model="form.politicalStatus"
              placeholder="请选择政治面貌"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input
              clearable
              v-model="form.idNumber"
              placeholder="请输入身份证号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考生号" prop="examineeNumber">
            <el-input
              clearable
              v-model="form.examineeNumber"
              placeholder="请输入考生号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="困难类别" prop="difficulty">
            <dict-data
              code="difficulty"
              clearable
              filterable
              v-model="form.difficulty"
              placeholder="请选择困难类别"
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import {ref, reactive, watch} from 'vue';
import {EleMessage} from 'ele-admin-plus/es';
import {useFormData} from '@/utils/use-form-data';
import {addStudent, listTeacherSearch} from '@/api/manage/student/admin/index.js';

import {listSearch} from '@/api/system/place';


const emit = defineEmits(['done', 'update:modelValue']);

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  // data: Object
});

/** 是否是修改 */
// const isUpdate = ref(false);

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);


/**
 * 生源地下拉框loading
 * @type {Ref<UnwrapRef<boolean>>}
 */
const sourceLoading = ref(false);


/**
 * 老师下拉框loading
 * @type {Ref<UnwrapRef<boolean>>}
 */
const teacherLoading = ref(false);

/**
 * 生源地下拉列表
 * @type {Ref<UnwrapRef<*[]>>}
 */
const sourceList = ref([]);


/**
 * 辅导员下拉列表
 * @type {Ref<UnwrapRef<*[]>>}
 */
const teacherList = ref([]);


/** 表单数据 */
const [form, resetFields, assignFields] = useFormData({
  name: '',
  code: '',
  sex: '',
  birthday: '',
  enterTime: '',
  graduationYear: '',
  campus: '',
  organization: '',
  grade: '',
  department: '',
  major: '',
  majorDirection: '',
  studyTime: '',
  classNum: void 0,
  counsellorCode: '',
  nation: '汉族',
  source: '',
  politicalStatus: '',
  idNumber: '',
  examineeNumber: '',
  difficulty: '非困难',
});

/** 表单验证规则 */
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入姓名',
      type: 'string',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入学号',
      type: 'string',
      trigger: 'blur'
    }
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      type: 'string',
      trigger: 'blur'
    }
  ],
  birthday: [
    {
      required: true,
      message: '请选择出生年月',
      type: 'date',
      trigger: 'blur'
    }
  ],
  enterTime: [
    {
      required: true,
      message: '请选择入学时间',
      type: 'date',
      trigger: 'blur'
    }
  ],
  graduationYear: [
    {
      required: true,
      message: '请选择毕业年份',
      type: 'string',
      trigger: 'blur'
    }
  ],
  campus: [
    {
      required: true,
      message: '请输入校区',
      type: 'string',
      trigger: 'blur'
    }
  ],

  organization: [
    {
      required: true,
      message: '请输选择总支',
      type: 'string',
      trigger: 'blur'
    }
  ],
  grade: [
    {
      required: true,
      message: '请输入年级',
      type: 'string',
      trigger: 'blur'
    }
  ],
  department: [
    {
      required: true,
      message: '请输入系别',
      type: 'string',
      trigger: 'blur'
    }
  ],
  major: [
    {
      required: true,
      message: '请输入专业',
      type: 'string',
      trigger: 'blur'
    }
  ],
  majorDirection: [
    {
      required: true,
      message: '请输入专业方向',
      type: 'string',
      trigger: 'blur'
    }
  ],
  studyTime: [
    {
      required: true,
      message: '请选择学制',
      type: 'string',
      trigger: 'blur'
    }
  ],
  classNum: [
    {
      required: true,
      message: '请输入班级',
      type: 'number',
      trigger: 'blur'
    }
  ],
  counsellorCode: [
    {
      required: true,
      message: '请选择辅导员',
      type: 'string',
      trigger: 'blur'
    }
  ],
  nation: [
    {
      required: true,
      message: '请选择民族',
      type: 'string',
      trigger: 'blur'
    }
  ],
  source: [
    {
      required: true,
      message: '请输入生源地',
      type: 'string',
      trigger: 'blur'
    }
  ],
  politicalStatus: [
    {
      required: true,
      message: '请选择政治面貌',
      type: 'string',
      trigger: 'blur'
    }
  ],
  idNumber: [
    {
      required: true,
      message: '请输入身份证号',
      type: 'string',
      trigger: 'blur'
    }
  ],
  examineeNumber: [
    {
      required: true,
      message: '请输入考生号',
      type: 'string',
      trigger: 'blur'
    }
  ],
  difficulty: [
    {
      required: true,
      message: '请选择困难类别',
      type: 'string',
      trigger: 'blur'
    }
  ]
});

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    addStudent(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success(msg);
        updateModelValue(false);
        emit('done');
      })
      .catch((e) => {
        // updateModelValue(false);
        loading.value = false;
        EleMessage.error(e.message);
      });
  });
};

/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};

//获取生源地下拉列表
const remoteSource = (query) => {
  if (query) {
    sourceLoading.value = true;
    listSearch(query).then(response => {
      sourceLoading.value = false;
      // console.log(response);
      sourceList.value = response.data;
    });
  } else {
    sourceList.value = [];
  }
}


//获取老师下拉列表
const remoteTeacher = (query) => {
  if (query) {
    teacherLoading.value = true;
    listTeacherSearch(query).then(response => {
      teacherLoading.value = false;
      teacherList.value = response.data;
    });
  } else {
    teacherList.value = [];
  }
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (!modelValue) {
      resetFields();
      formRef.value?.clearValidate?.();
    }
  }
);
</script>
